<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
    <script type="text/javascript" src="js/jquery.validate.js"></script>
    
		<script type="text/javascript" src="js/bootstrap.min.js" ></script>
		
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<link rel="stylesheet" href="css/bootstrap-theme.min.css" />
		<link rel="stylesheet" href="css/login.css" />
		<script type="text/javascript">
        $(function () {
            $("#loginForm").validate({
                rules:{
                    //用户名不能为空
                    username:"required",
                    //密码不能为空，且长度大于6--12字符之间
                    userpass:{
                        required:true,
                        rangelength:[6,12]
                    }
                },
                messages:{
                    //用户名不能为空
                    username:"用户名不能为空",
                    //密码不能为空，且长度在6--12字符之间
                    userpass:{
                        required:"密码不能为空",
                        rangelength:"密码长度在6--12字符之间"
                    }
                }
            })
        })
    </script>
	</head>
	<body>
		<div class="box">
			<label style="text-align:center;line-height: 200px;display: block;font-size: 44px;color: #323e60;font-family: '微软雅黑';"> 未来科技超市管理系统</label>
			<div class="left">
				<form id="loginForm" method="post" action="#">
					<div class="formdiv">
					 	<div class="input-group">
				            <span class="input-group-addon">用户名:</span>
				            <input type="text" class="form-control" placeholder="请输入用户名..." name="username">
				        </div>

						<div class="input-group">
				            <span class="input-group-addon">密&nbsp;&nbsp;码:</span>
				            <input type="text" class="form-control" placeholder="请输入密码..." name="userpass" >
				        </div>
					</div>
					<div class="btndiv">
						<input type="submit" value="登录"  />
					</div>
				</form>
				
			</div>
			<div class="right">
				<div class="clockdiv">
					<!-- 表盘 -->
					<canvas id="canvas" width="400" height="400"></canvas>
					<!-- 时针 分针 秒针 -->
					<canvas id="p_canvas" width="400" height="400"></canvas>
				</div>
				
			</div>
		</div>
		<script type="text/javascript" src="js/login.js" ></script>
	</body>
</html>
